<nz-card>
  <app-water-mark />
  <div nz-row>
    <div nz-col nzFlex="94px">所属类目:</div>
    <div class="tag-wrap" nz-col nzFlex="1" [ngStyle]="{ maxHeight: expanded ? '58px' : '33px' }">
      <nz-tag class="m-r-25 m-b-10" nzMode="checkable" (click)="allSel()">
        <span class="sp-14">全部</span>
      </nz-tag>
      @for (tag of tagArray; track tag) {
        <nz-tag class="m-r-25 m-b-10" nzMode="checkable" [(nzChecked)]="tag.isChecked">
          <span class="sp-14">{{ tag.name }}</span>
        </nz-tag>
      }
    </div>
    <div nz-col nzFlex="51px">
      @if (!expanded) {
        <a class="operate-text" (click)="expanded = true">
          展开
          <i nz-icon nzTheme="outline" nzType="down"></i>
        </a>
      }
      @if (expanded) {
        <a class="operate-text" (click)="expanded = false">
          收起
          <i nz-icon nzTheme="outline" nzType="up"></i>
        </a>
      }
    </div>
  </div>
  <nz-divider class="m-0" nzDashed></nz-divider>
  <div class="m-t-20 m-b-20" nz-row [nzAlign]="'middle'">
    <div nz-col nzFlex="94px">其它选项:</div>
    <div nz-col nzFlex="1">
      <div nz-row>
        <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="12" [nzXl]="8" [nzXs]="12" [nzXXl]="8">
          作者：
          <nz-select class="max-width" [nzPlaceHolder]="'不限'" [(ngModel)]="searchInfo.author">
            <nz-option nzLabel="李三" nzValue="1"></nz-option>
          </nz-select>
        </div>
        <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="12" [nzXl]="8" [nzXs]="12" [nzXXl]="8">
          好评度：
          <nz-select class="max-width" [nzPlaceHolder]="'不限'" [(ngModel)]="searchInfo.like">
            <nz-option nzLabel="优秀" nzValue="1"></nz-option>
            <nz-option nzLabel="普通" nzValue="2"></nz-option>
          </nz-select>
        </div>
      </div>
    </div>
  </div>
</nz-card>
<nz-card class="m-t-20">
  <app-water-mark />
  <div nz-row [nzGutter]="[16, 16]">
    @for (item of 8 | numberLoop; track $index) {
      <div nz-col [nzLg]="6" [nzMd]="12" [nzSm]="24" [nzXl]="6" [nzXs]="24" [nzXXl]="6">
        <nz-card nzHoverable [nzActions]="[op1, op2, op3, op4]">
          <nz-card-meta [nzAvatar]="nzAvatar" [nzTitle]="'Alipay'">
            <ng-template #nzAvatar>
              <nz-avatar nzSize="small" [nzSrc]="'imgs/default_face.png'"></nz-avatar>
            </ng-template>
          </nz-card-meta>
          <div class="card-info">
            <div>
              <p nz-typography nzType="secondary">活跃用户</p>
              <p>
                12
                <span class="wan">万</span>
              </p>
            </div>
            <div>
              <p nz-typography nzType="secondary">新增用户</p>
              <p>{{ 1962 | number: '3.' }}</p>
            </div>
          </div>
        </nz-card>
      </div>
    }
  </div>

  <ng-template #op1>
    <i nz-icon nz-tooltip nzTooltipTitle="下载" nzType="download"></i>
  </ng-template>
  <ng-template #op2>
    <i nz-icon nz-tooltip nzTooltipTitle="编辑" nzType="edit"></i>
  </ng-template>
  <ng-template #op3>
    <i nz-icon nz-tooltip nzTooltipTitle="分享" nzType="share-alt"></i>
  </ng-template>
  <ng-template #op4>
    <i nz-dropdown nz-icon nzPlacement="bottomLeft" nzType="ellipsis" [nzDropdownMenu]="op4Menu"></i>
    <nz-dropdown-menu #op4Menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>1st menu item</li>
        <li nz-menu-item>2st menu item</li>
        <li nz-menu-item>3st menu item</li>
      </ul>
    </nz-dropdown-menu>
  </ng-template>
</nz-card>
